<template>
	<view class="newPage">
		<view class="header" :style="'padding:'+top+'px 0px 10px 10px;'">
			<!-- left-20：减少20是为让左右两边留空10px -->
			<view :style="'width:'+(left-20)+'px; height:'+height+'px;'" @tap.stop="$openPage('/pagesNews/search')">
				&#xe651; 请输入关键字</view>
		</view>

		<!-- 导航内容 -->
		<view class="navs" :style="'--i:'+((2*current + 1)/8)">
			<view @tap="current = k" :class="current == k ?'select':''" v-for="(v,k) of navsList" :key="k">{{v}}</view>
		</view>

		<!-- 底部切换 -->
		<swiper class="swiper" :current="current" @change="change">
			<!-- 左右切换 -->
			<swiper-item class="item" v-for="(v,k) of list" :key="k">
				<!-- 滚动组件 -->
				<scroll-view class="scroll" scroll-y>
					<!-- 每一项数据内容 -->
					<view class="v"
						@tap.stop="$openPage('/pagesNews/detail?id=3&title='+encodeURIComponent(JSON.stringify(v1.rendered)))"
						v-for="(v1,k1) of v" :key="k1">
						<!-- 标题头 -->
						<view class="rendered">{{v1.rendered}}</view>
						<!-- 文本内容 -->
						<view class="renderedDescribe">{{v1.renderedDescribe}}</view>
						<!-- 图片 -->
						<image class="img" mode="aspectFit" @tap.stop="previewImage(v1.thumbnail, k2)"
							v-for="(v2,k2) of v1.thumbnail" :key="k2" :src="v2">
						</image>
						<!-- 发布时间 -->
						<view class="time">发布时间：{{v1.time}}</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance, reactive } from "vue"
	// 全局引入
	let { appContext } = getCurrentInstance();
	let { $http, $openPage } = appContext.config.globalProperties;
	// 调用全局引入的函数
	const Request = new $http({ url: '/system/testacc/release/list/type' });

	// 小程序胶囊的位置:图解(https://blog.csdn.net/qq_43853213/article/details/115444202)
	let { height = 32, left = 278, top = 26 } = uni.getMenuButtonBoundingClientRect()

	// 导航标题内容
	let navsList = ["新闻通知", "工作状态", "政策法规", "公示公告"]
	// 当前所选中的导航内容下标
	let current = ref(0)
	// 获取后台数据
	let list = reactive([
		[],
		[],
		[],
		[]
	])

	// 每次切换都会触发事件
	let change = (e: any) => {
		// 改变当前值
		current.value = e.detail.current
		// 每次切换完页面后，判断对应的数组中是否有数据，若没有则获取数据
		if (!list[current.value].length) getList()
	}

	// 预览图片
	let previewImage = async (urls = [], current = 0) => {
		uni.previewImage({
			urls,
			current,
			loop: true,
			indicator: 'number',
			success: res => {
				console.log(res)
			},
			fail: err => {
				console.log(err)
			}
		})
	}

	// 获取数据请求了
	let getList = async () => {
		let res = await Request?.get({
			data: { "info_type": current.value + 1 }
		})
		if (res.data.code != 200) return console.error("请求失败了")

		res.data.data.forEach(v => {
			list[current.value].push({
				"rendered": v.rendered,
				"renderedDescribe": v.renderedDescribe,
				"time": v.time,
				"thumbnail": v.thumbnail.split(',').map((v: any) =>
					`https://nntzback.jyhdkj.com${v}`)
			})
		})

		// console.log(JSON.stringify(list, ["rendered", "renderedDescribe", "thumbnail", "time"], 2))
	}

	// 页面加载时，先获取一下数据
	getList()
</script>

<style lang="scss" scoped>
	.newPage {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	// 使用粘性布局
	.header {
		background-color: #3782FE;

		>view {
			background-color: #f2f2f2;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			color: #606266;
			padding-left: 10px;
			font-family: "iconfont";
		}
	}

	// 导航内容--
	.navs {
		height: 40px;
		display: flex;
		position: relative;
		box-shadow: 0px 10px 50px #f9f9f9;

		>view {
			flex: 1;
			@include flexCenterCenter;
			transition: all 0.5s;
		}

		&::after {
			content: "";
			width: 20px;
			height: 2px;
			position: absolute;
			bottom: 0px;
			left: calc(100% * var(--i));
			border-radius: 2px;
			background-color: #3782FE;
			transform: translateX(-50%);
			transition: all 0.5s;
		}
	}

	// 选中的下标
	.select {
		font-weight: bold;
		color: #3782FE;
	}

	// 导航内容==

	.swiper {
		flex: 1;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.item,
	.scroll {
		width: 100%;
		height: 100%;
	}

	.v {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		padding: 40rpx 20rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.rendered {
		grid-column: 1/-1;
		color: #494949;
		font-size: 30rpx;
		font-weight: bold;
		@include transcendLine(1);
	}

	.renderedDescribe {
		grid-column: 1/-1;
		font-size: 22rpx;
		color: #777;
		@include transcendLine(2);
	}

	.img {
		width: 212rpx;
		height: 212rpx;
		border-radius: 4px;
		overflow: hidden;
		justify-self: center;

		&:first-of-type {
			justify-self: end;
		}

		&:nth-of-type(3) {
			justify-self: start;
		}
	}

	// 发布时间
	.time {
		grid-column: 1/-1;
		font-size: 24rpx;
		color: #969696;
		margin-top: 20rpx;
	}
</style>
